<template>
  <div class="content_box">
    <div class="modelInfo">
      <vue-scroll ref="vs" :ops="$store.state.ops">
        <div class="modelInfo_box">
          <div class="title">
            <div class="orderNumber">订单编号 &nbsp;&nbsp;&nbsp;{{patientData.orderNum}}</div>
            <div
              class="orderNumber"
              style="margin-left:50px;"
            >状态 &nbsp;&nbsp;&nbsp;{{patientData.orderStatus | orderStatusFilter}}</div>
          </div>
          <div class="userInfo">
            <div class="infoTitle">患者资料</div>
            <div class="userName">
              就诊人：
              <span>{{patientData.patientName}}</span>
              <span>{{patientData.patientSex | patientSex}}</span>
              <span>{{patientData.patientAge}}岁</span>
            </div>
            <div class="userName">
              是否就该病到医院就诊过：
              <span>{{ patientData.firstQuery |checkState}}</span>
            </div>
          </div>
          <div class="infoTitle">病情描述</div>
          <span class="drugsInfo">{{patientData.illnessDesc}}</span>
          <ul class="imgUl" v-if="imgArr.length > 0">
            <viewer :images="imgArr">
              <img class="imgLi" v-for="item in imgArr" :src="item" :key="item" />
            </viewer>
          </ul>
        </div>
      </vue-scroll>
    </div>
    <div class="bottomBtn">
      <span class="btn btnL colorGray" v-if="$store.state.common.STATE==6">开处方</span>
      <span
        class="btn btnL"
        @click="modelTypeMedicalHistory = 'medicalHistoryDialog'"
        v-else-if="!recipeId||!medicalHistoryId"
      >开处方</span>
      <span class="btn btnS" @click="modelType = 'CheckMedicalRecord'" v-if="medicalHistoryId">查看病历</span>
      <span class="btn btnS" @click="checkPrescription" v-if="recipeId">查看处方</span>
    </div>
    <!-- 弹出框  V2.2.2使用 -->
    <!-- 查看病历弹框 -->
    <CheckMedicalRecord
      :showTrue="modelType==='CheckMedicalRecord'"
      :patientData="medicalHistoryObj"
      @close="modelType = ''"
    ></CheckMedicalRecord>
    <!-- 提交处方弹框 -->
    <submitPrescriptiony
      :showTrue="modelType==='submitPrescription'"
      :prescriptionData="prescriptionData"
      :reviewShow="submitBtn"
      @close="closeModel"
      @change="changePrescription"
      @submit="submitPrescription"
    ></submitPrescriptiony>
    <!-- 填写处方弹框 -->
    <medicalHistoryDialog
      :showTrue="modelTypeMedicalHistory==='medicalHistoryDialog'"
      :patientData="patientData"
      @close="closeModel"
      @submit="savePrescription"
    ></medicalHistoryDialog>
  </div>
</template>

<script>
import {
  getOrderDetails,
  getOrderInfo,
  doctorStartOrder,
  doctorEndOrder,
  addMedicalHistory,
  queryMedicalHistory
} from "../../requestApi/incompleteCommunication";
import CheckMedicalRecord from "../../components/dialog/checkMedicalRecord";
import submitPrescriptiony from "../../components/dialog/depengingDialog";
import medicalHistoryDialog from "../../components/dialog/medicalHistoryDialog";
import { addRecipeMedicalHistory } from "../../requestApi/prescription";

export default {
  name: "",
  components: {
    CheckMedicalRecord,
    submitPrescriptiony,
    medicalHistoryDialog
  },
  props: {},
  data() {
    return {
      doctorData: {
        doctorId: ""
      },
      patientData: {},
      imgArr: [],
      modelType: "",
      modelTypeMedicalHistory: "", //添加病历处方弹框
      toCloseModel: true, // 是否关闭弹出框
      medicalHistoryId: "", //病历ID
      recipeId: "", //处方ID
      prescriptionData: {},
      submitBtn: true,
      firstDiagnose: "",
      medicalHistoryObj: {}, // 病历信息
      clearPrescriptionData: true
    };
  },
  created() {
    let self = this;
    if (localStorage.getItem("doctorId")) {
      self.doctorData.doctorId = localStorage.getItem("doctorId");
      self.doctorData.doctorName = localStorage.getItem("doctorName");
    }
    this.sendPatientData();
  },
  mounted() {},
  methods: {
    // 打开弹框
    showModel(val) {
      this.modelType = val;
    },
    // 关闭弹框
    closeModel() {
      if (this.toCloseModel) {
        this.modelType = "";
        this.modelTypeMedicalHistory = "";
      }
    },
    // 重新编辑处方病历---打开填写页
    changePrescription() {
      this.modelTypeMedicalHistory = "medicalHistoryDialog";
      this.modelType = "";
      this.toCloseModel = false;
      this.clearPrescriptionData = false;
    },
    // 查询病历详情
    queryMedicalHistoryFun(val) {
      let data = queryMedicalHistory({
        medicalHistoryId: val
      }).then(data => {
        if (data.code == 200) {
          this.medicalHistoryObj = data.data;
          this.medicalHistoryObj.orderTime = data.data.visitDate;
        }
      });
    },
    // 跳转页面---查看处方
    checkPrescription() {
      var routerUrl = "/home/prescription/content?recipeId=" + this.recipeId;
      this.$router.push(routerUrl);
    },
    // 提交处方病历
    submitPrescription(val) {
      let self = this;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let response = addRecipeMedicalHistory({
        userId: this.patientData.userId,
        name: this.patientData.patientName,
        sex: this.patientData.patientSex,
        age: this.patientData.patientAge,
        drugList: self.prescriptionData.drugList, // 处方药品集合
        recipeType: 0, // 处方类型: 0普通处方, 1其他
        recipeSource: 0, // 处方来源:0=web端,1=一体机
        illnessDesc: this.prescriptionData.userInfo.illnessDesc, // 病情描述
        firstDiagnose: this.prescriptionData.userInfo.firstDiagnose, // 初步诊断
        treatmentSuggestion: this.prescriptionData.userInfo.treatmentSuggestion, //处理意见
        doctorId: this.patientData.doctorId,
        doctorName: this.patientData.doctorName,
        orderId: this.$route.query.orderId,
        patientId: this.patientData.patientId,
        drugstoreId: this.patientData.sourceShop //购药门店id
      }).then(response => {
        loading.close();
        if (response.code == 200) {
          self.toCloseModel = true;
          self.recipeId = response.data.recipeId;
          self.medicalHistoryId = response.data.medicalHistoryId;
          self.clearPrescriptionData = true;
          self.closeModel();
          self.queryMedicalHistoryFun(response.data.medicalHistoryId);
        } else {
          loading.close();
          self.$message({
            type: "error",
            message: "系统出小差！"
          });
        }
      });
    },
    // 完成处方病历填写---打开提交页
    savePrescription(val) {
      let self = this;
      var userInfo = {
        orderId: self.patientData.orderId,
        patientId: self.patientData.patientId,
        userId: self.patientData.userId,
        createTime: self.patientData.createTime,
        name: self.patientData.patientName,
        sex: self.patientData.patientSex,
        age: self.patientData.patientAge,
        recipeType: 0, // 处方类型: 0普通处方, 1其他
        recipeSource: 0, // 处方来源:0=web端,1=一体机,
        doctorId: self.doctorData.doctorId,
        doctorName: self.doctorData.doctorName,
        drugstoreId: self.patientData.sourceShop, //购药门店id
        illnessDesc: val.illnessDesc, // 病情描述
        firstDiagnose: val.firstDiagnose, // 初步诊断
        treatmentSuggestion: val.treatmentSuggestion //处理意见
      };
      this.prescriptionData = { drugList: val.drugList, userInfo: userInfo };
      this.modelType = "submitPrescription";
      this.toCloseModel = false;
    },
    // 获取订单信息
    sendPatientData(val) {
      let self = this;
      let response = getOrderDetails({
        orderId: this.$route.query.orderId
      })
        .then(response => {
          if (response.code == 200 && response.data) {
            self.patientData = response.data;
            if (response.data.illnessImage) {
              self.imgArr = response.data.illnessImage.split(",");
            }
            self.medicalHistoryId = self.patientData.medicalHistoryId;
            if (self.medicalHistoryId) {
              self.queryMedicalHistoryFun(self.medicalHistoryId);
            }
            self.recipeId = self.patientData.recipeId;
          } else {
            this.$message({
              type: "error",
              message: "暂无数据！"
            });
          }
        })
        .catch(msg => {
          this.$message({
            type: "error",
            message: msg
          });
        });
    }
  },
  filters: {
    checkState: function(val) {
      if (val == 0) {
        return "是";
      } else if (val == 1) {
        return "否";
      } else {
        return "未知";
      }
    },
    patientSex: function(val) {
      if (val == 0) {
        return "女";
      } else if (val == 1) {
        return "男";
      } else {
        return "未知";
      }
    },
    orderStatusFilter(val) {
      //订单状态 0=待付款 1=待接诊 2=待确认 3=已完成 4=已取消 5=问诊中
      if (Number(val) == 0) {
        return "待付款";
      } else if (Number(val) == 1) {
        return "待接诊";
      } else if (Number(val) == 2) {
        return "待确认";
      } else if (Number(val) == 3) {
        return "已完成";
      } else if (Number(val) == 4) {
        return "已取消";
      } else if (Number(val) == 5) {
        return "问诊中";
      } else {
        return "未知";
      }
    }
  },
  computed: {},
  watch: {}
};
</script>

<style scoped>
.modelInfo {
  height: calc(100% - 125px);
  overflow: hidden;
}
.modelInfo_box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 40px;
  padding-bottom: 20px;
}
.content_box {
  background-color: #fff;
  overflow: hidden;
  padding-top: 25px;
  height: 100%;
}
.title {
  overflow: hidden;
}
.orderNumber {
  float: left;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(42, 41, 40, 1);
}
.userInfo {
  margin-top: 25px;
}
.infoTitle {
  font-size: 16px;
  font-weight: 500;
  color: rgba(42, 41, 40, 1);
  height: 22px;
  line-height: 22px;
  margin-bottom: 16px;
}
.userName {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(122, 118, 118, 1);
  margin-bottom: 12px;
}
.userName span {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(55, 55, 55, 1);
  display: inline-block;
  margin-right: 15px;
}
.drugsInfo {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(55, 55, 55, 1);
}
.imgUl {
  overflow: hidden;
  margin-top: 25px;
  margin-bottom: 150px;
}
.imgLi {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 14px;
  margin-bottom: 14px;
  background-color: #ccc;
}
.imgLi > img {
  width: 100%;
  height: 100%;
}
.bottomBtn {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  height: 122px;
}
.btn {
  display: inline-block;
  line-height: 40px;
  height: 40px;
  background: rgba(255, 101, 50, 1);
  border-radius: 20px;
  font-family: MicrosoftYaHei;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  margin: 0px 15px;
  cursor: pointer;
}
.btnS {
  width: 150px;
}
.btnL {
  width: 326px;
}
.colorGray {
  background: gray;
}
.cancleBox {
  float: right;
  width: 120px;
  height: 34px;
  background: rgba(42, 41, 40, 1);
  border-radius: 20px;
  position: absolute;
  top: 13px;
  right: 40px;
  color: #fff;
  cursor: pointer;
  line-height: 34px;
  text-align: center;
}
</style>
